<div class="content">
    <div id="example_title">
        <h1>Custom Actions</h1>
        There is an easier way to define popup actions now. Which can be triggered with w2popu.action('action-name') method.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<button id="popup" class="w2ui-btn">Open Popup</button>

<!--CODE-->
<script type="module">
import { w2popup, query } from '__W2UI_PATH__'

query('#popup').on('click', popup)

function popup() {
    w2popup.open('Some text', {
        actions: {
            // function name is used for button text
            Ok(event) {
                // do something
                w2popup.close()
            },
            Cancel(event) {
                w2popup.close()
            },
            // custom button, when you can define text and class
            custom: {
                text: "Other Button",
                class: "w2ui-btn-blue",
                style: 'color: yellow',
                onClick(event) {
                    console.log('button clicked')
                }
            }
        }
    })
    .then(() => {
        console.log("Popup ready")
    })
}
</script>
